<template>
  <div class="api-right">
    <div class="api_right-li">
      <h1 class="api_right-h1">Api接口中文名称</h1>
      <p class="api_right-p1">api接口描述</p>
      <div class="api_right-p2">
        <div class="right-p2_left">
          <span class="left-span1">POST</span>
          <!-- <span class="left-span1 buts_1">GET</span>
          <span class="left-span1 buts_2">PUT</span>
          <span class="left-span1 buts_3">DELETE</span> -->
          <span class="left-span2">api/taskplan/modules</span>
          <span @click="copyTab('api/taskplan/modules')"><i class="el-icon-document-copy"></i></span>
        </div>
        <div class="right-p2_right"><i class="el-icon-star-off"></i>收藏</div>
      </div>
      <div class="api_right-p2">
        <div class="right-p2_left">
          <span class="left-span2">api/taskplan/modules</span>
          <span @click="copyTab('api/taskplan/modules')"><i class="el-icon-document-copy"></i></span>
          <span class="left-span3">生产环境</span>
        </div>
      </div>
    </div>
    <div class="api_right-li">
      <h1 class="api_right-h2">PC端预览</h1>
      <!-- <div>
        <component :is="'admin-task'"></component>
      </div> -->
    </div>
    <div class="api_right-li">
      <h1 class="api_right-h2">移动端预览</h1>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {

      }
    },
    mounted () { },
    methods: {
      async copyTab (val) {
        var textArea = document.createElement('textarea')
        var elementID = 'cp_hgz_input'
        textArea.setAttribute('id', elementID)
        textArea.value = val
        document.body.appendChild(textArea)
        document.getElementById(elementID).select()
        var successful = document.execCommand('copy')
        var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板'
        document.getElementById(elementID).remove()
        this.$message({
          message: msg,
          type: 'success'
        })
      },
      preCopy (preClass) {
        // 复制json格式数据
        var preValue = document.getElementsByClassName(preClass)
        this.copyTab(preValue[0].innerHTML)
      }
    }
  }
</script>
<style lang="scss">
  @import "./api-right.scss";
</style>